<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title>QQ彩贝导航</title>
		<link rel="icon" href="img2/favicon.ico" />
		<style>
			*{margin: 0px;padding: 0px;}
			.clearfix:after{
				display: table;
				content: "";
				clear: both;
			}
			.fl{float: left;}
			.box{width: 960px; margin: 0 auto;
			
			padding-top: 20px;padding-bottom: 10px;}
			li{list-style: none;float: left;}
			.box>img{float: left;margin-right: 40px;}
			.txt{
				position: relative;
			}
			.txt li{height: 46px;line-height: 46px;margin-left: 10px;font-size: 14px;}
			.icon { /*background-color: red;*/margin-top: 11px;margin-left: 8px;}
			.icon img{margin-left: 14px;}
			.beiji{width: 100%;background:linear-gradient(#fff,#f6f6f6,#ebebeb);position: relative;}
			.txt li .zhuan{position: absolute;
			display:inline-block;left: 11px;top: -9px;background: url("img2/header_03.png") no-repeat 0px 0px;
			width:68px ;height: 30px;}
			@keyframes zhuan1{
				0%{width: 0px;}
				25%{width: 10px;background: url(img2/header_05.png) no-repeat 0px 0px;}
				50%{width: 30px;background: url(img2/header_05.png) no-repeat 0px 0px;}
				75%{width: 50px;background: url(img2/header_05.png) no-repeat 0px 0px;}
				100%{width: 68px;background: url(img2/header_05.png) no-repeat 0px 0px;}
			}
			.txt li a:hover .zhuan{animation: zhuan1 1s ;}
			/*width: 66px;height: 23px;position: absolute;right: 862px;top: 12px;*/
			/*.hua{position: absolute;right: 744px;top: 12px;}*/
			.icon img{transition: all 1s;}
			.icon img:hover{transform: rotate(360deg);transition-timing-function: linear;}
			.txt li .hua{position: absolute;
			display:inline-block;left: 171px;top: -9px;background: url("img2/header_07.png") no-repeat 0px 0px;
			width:68px ;height: 30px;}
			@keyframes hua1{
				0%{width: 0px;}
				25%{width: 10px;background: url(img2/header_09.png) no-repeat 0px 0px;}
				50%{width: 30px;background: url(img2/header_09.png) no-repeat 0px 0px;}
				75%{width: 50px;background: url(img2/header_09.png) no-repeat 0px 0px;}
				100%{width: 68px;background: url(img2/header_09.png) no-repeat 0px 0px;}
			}
			.txt li a:hover .hua{animation: hua1 1s;}
			.txt li a{text-decoration:none ;color: #000000;}
			.txt li a:hover{color: red;}
			/*@keyframes lunbo{
				from{src="img2/iconsB_11.gif"}
				to{ src="img2/header_05.png"}
			}*/
		/*	.txt span:hover{animation: hua1 1s;}*/
		</style>
	</head>
	<body>
	<div class="beiji">
		<div class="box clearfix" >
			<img src="img2/logo_170x46.png" />
			<ul class="txt fl clearfix">
				<li>
					<a href="#">
						<span class="zhuan"></span>返回商城
					</a>
				</li>
				<li>|</li>
				<li>商旅频道</li>
				<li>|</li>
				<li>
					<a href="#">
						<span class="hua"></span>积分商城
					</a>
					
				</li>
				<li>|</li>
				<li>商旅频道</li>
				<li>|</li>
				<li>了解彩贝</li>
				<li>|</li>
				<li>彩贝活动</li>
				<li>|</li>
				<li>个人中心</li>	
			</ul>
			<ul class="icon fl clearfix">
				<li><img src="img2/iconsB_11.gif"/></li>
				<li><img src="img2/iconsB_12.gif"/></li>
				<li><img src="img2/iconsB_13.png"/></li>
			</ul>
			<!--<div class="zhuan">
				
			</div>
			<div class="hua">
				
			</div>-->
		</div>
	</div>	
	</body>
</html>
